<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js组件component</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<!--        组件可以拓展HTML元素，封装可重用的代码-->
<!--        注册全局组件语法格式：   Vue.component(tagName,options)   tagName:组件名称，options:配置选项-->
<!--        组件调用：    <tagName></tagName>-->
    <div id="app">
<!--        注册全局组件runoob-->
        <runoob></runoob>
    </div>
    <script>
        //注册
        Vue.component('runoob',{
            template:'<h1>这是一个自定义全局组件</h1>'
        })
        //创建根实例
        new Vue({
            el:'#app'
        })
    </script>



    <div id="app2">
<!--        注册局部组件runoob2-->
        <runoob2></runoob2>
    </div>
    <script>
        var Child = {
            template:'<h1>这是一个自定义局部组件</h1>'
        }
        new Vue({
            el:'#app2',
            components:{
                //<runoob>组件将只能在父模板可用
                'runoob2':Child
            }
        })
    </script>



<!--注意！！！！！prop是单向绑定的，当父组件的属性变化时，将数据传导给子组件，但是反过来不会成立。-->
<!--如果子组件需要把数据传递回给父组件，就需要用到自定义事件，详情请参考hello11.html文件-->
    <div id="app3">
<!--        prop是子组件用来接收父组件传递过来的数据的一个自定义属性。-->
<!--        父组件的数据需要通过props把数据传递给子组件，子组件需要显式地用props选项声明“prop”-->
        <child message="hello!"></child>
    </div>
    <script>
        Vue.component('child',{
            //声明props
            props:['message'],
            //同样也可以在vm实例中像“this.message”这样使用
            template:'<span>{{message}}</span>'
        })
        new Vue({
            el:'#app3'
        })
    </script>



    <div id="app4">
<!--        动态Prop，类似与用v-bind指令绑定HTML特性到一个表达式，也可以用v-bind动态绑定props的值到父组件的数据中。-->
<!--        每当父组件的数据发生变化时，该变化也会传导给子组件-->
        <input v-model="parentMsg">
        <br>
        <child c-bind:message="parentMsg"></child>
    </div>
    <script>
        Vue.component('child',{
            props:['message'],
            template:'<span>{{message}}</span>'
        })
        new Vue({
            el:'#app4',
            data:{
                parentMsg:'父组件内容'
        }
        })
    </script>


    <div id="app5">
<!--        使用v-bind指令将todo传导每一个重复的组件中-->
        <ol>
            <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
        </ol>
    </div>
    <script>
        Vue.component('todo-item',{
            props:['todo'],
            template:'<li>{{todo.text}}------{{todo.score}}</li>'
        })
        new Vue({
            el:'#app5',
            data:{
                sites:[
                    {text:'苏炳添',score:'9.83s'},
                    {text:'博尔特',score: '9.58s'},
                    {text:'加特林',score: '9.74s'}
                ]
            }
        })
    </script>
</body>
</html>